<template>
  <div>
    <!-- 面包屑 -->
    <MBX level1="商品管理" level2="商品分类"></MBX>
    <!-- 主体 -->
    <el-card class="mt15">
      <!-- 添加分类 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="addGoodsCateDia"
            >添加分类</el-button
          >
        </el-col>
      </el-row>

      <!-- 商品分类表格 -->
      <el-table :data="goodsCateData" border class="mt15" row-key="cat_id">
        <el-table-column label="#" type="index">
          <template slot-scope="scope">
            <div>
              <!-- 添加一个自定义下标 -->
              {{ scope.row.index }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分类名称" prop="cat_name"></el-table-column>
        <el-table-column label="是否有效">
          <template slot-scope="scope">
            <div>
              <i v-if="scope.row.cat_deleted" class="el-icon-success"></i>
              <i v-else class="el-icon-error"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="排序">
          <template slot-scope="scope">
            <div>
              <el-tag :type="typeArr[scope.row.cat_level]">{{
                scope.row.cat_level | UserRank
              }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button @click='editCateDia(scope.row)' type="primary" icon="el-icon-edit" size="mini"
                >编辑</el-button
              >
              <el-button type="danger" icon="el-icon-delete" size="mini"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        class="mt15"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="catePageInfo.pagenum"
        :page-sizes="[5, 10, 15]"
        :page-size="catePageInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 添加分类对话框 -->
    <el-dialog @close='resetForm' title="添加分类" :visible.sync="isAddCateDia">
      <el-form :model="addGoodsCateData">
        <el-form-item label="分类名称" label-width="80px">
          <el-input
            v-model="addGoodsCateData.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="父级分类" label-width="80px">
          <el-cascader
            clearable
            ref='goodsTwoCateRef'  
            v-model="checkedArr"
            :options="goodsTwoCateData"
            :props="defaultProps"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddCateDia = false">取 消</el-button>
        <el-button type="primary" @click="addGoodsCateOk"
          >确 定</el-button
        >
      </div>
    </el-dialog>


       <!-- 编辑分类对话框 -->
    <el-dialog @close='resetForm' title="添加分类" :visible.sync="isEditCateDia">
      <el-form :model="editFormData">
        <el-form-item label="分类名称" label-width="80px">
          <el-input
            v-model="editFormData.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditCateDia = false">取 消</el-button>
        <el-button type="primary" @click="editGoodsCateOk"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "goodscate",
  data() {
    return {
        //是否显示编辑对话框
        isEditCateDia:false,
        //编辑的数据对象
        editFormData:{
           cat_name:'',
           cat_id:''
        },
        //定义父级分类配置项
        defaultProps:{ 
            expandTrigger: 'hover',
            label:'cat_name',
            children:'children',
            value:'cat_id',
            //设置为true表示可以选择任意的级别
            checkStrictly:true,
        },
        //二级分类数据
        goodsTwoCateData:[],
        //选择的父级分类数组
        checkedArr:[],
        //要添加的分类数据对象
      addGoodsCateData: {
        //父分类id
        cat_pid: "",
        //分类名称
        cat_name: "",
        //当前新添加的分类级别
        cat_level: "",
      },
      //是否显示添加分类对话框
      isAddCateDia: false,
      //分页总条数，默认0条
      total: 0,
      //分页查询条件
      catePageInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      //分类列表数据
      goodsCateData: [],
      typeArr: {
        0: "primary",
        1: "success",
        2: "warning",
      },
    };
  },
  created() {
    this.getGoodsCateList();
  },
  methods: {
      //确定向后台更新数据
     async editGoodsCateOk(){
          //此处应该有一个表单正则验证，省略。。。，直接调后台更新接口
          const {cat_id,cat_name}=this.editFormData
          const res=await this.$API.editGoodsCateAPI(cat_id,cat_name)
        console.log('返回更新后的结果：',res)
         //刷新页面
        this.getGoodsCateList();
         //隐藏编辑分类对话框
          this.isEditCateDia=false
      },
      //打开编辑对话框
      editCateDia(row) {
          console.log('当前要编辑的分类：',row)
          this.editFormData.cat_name=row.cat_name
          this.editFormData.cat_id=row.cat_id
        
          this.isEditCateDia=true;
      },
      //重置添加分类
      resetForm() {
          console.log('重置添加分类')
          this.checkedArr=[]
          this.addGoodsCateData={}
      },
      //确定向后台添加新的商品分类名称
     async addGoodsCateOk(){
          //1.父级分类，2.分类名称,3.当前分类级别
          if(this.checkedArr.length!==0) {
              this.addGoodsCateData.cat_pid=this.current_Cate_id
              this.addGoodsCateData.cat_level=this.checkedArr.length

          }else {
              this.addGoodsCateData.cat_pid=0
              this.addGoodsCateData.cat_level=0
          }

         // console.log('我需要的3个参数：',this.addGoodsCateData)

         //调添加分类接口，将新的分类添加给后台数据库
        const res=await this.$API.addGoodsCateAPI(this.addGoodsCateData)
        console.log('添加分类后台返回的东东：',res)

         //刷新页面
        this.getGoodsCateList();
         //隐藏添加分类对话框
          this.isAddCateDia=false
      },
      //级联选择器改变时触发
      handleChange() {
          console.log('goodsTwoCateRef:',this.$refs.goodsTwoCateRef)
          //选中一个分类后，然后隐藏当前级联选择框
          this.$refs.goodsTwoCateRef.dropDownVisible=false;
      },
    //打开添加商品分类对话框
    async addGoodsCateDia() {
        //调分类接口获取二级分类数据
        const res=await this.$API.goodsCateListAPI({type:2})
        console.log('二级分类数据：',res)
        this.goodsTwoCateData=res;
        this.isAddCateDia=true;
    },
    //每页条数改变时的分类
    handleSizeChange(val) {
      this.catePageInfo.pagesize = val;
      this.getGoodsCateList();
    },
    //当前页码改变时的分类
    handleCurrentChange(val) {
      this.catePageInfo.pagenum = val;
      this.getGoodsCateList();
    },
    async getGoodsCateList() {
      //调用接口渲染分类数据
      const res = await this.$API.goodsCateListAPI(this.catePageInfo);

      let { total, result } = res;

      //为了给分类表格添加序号，核心思路：给res添加自定义属性index配合type=index
      result.forEach((item, index) => {
        item.index = index + 1;
      });

      this.total = total;

      console.log("三级分类数据：", res);
      this.goodsCateData = result;
    },
  },
  computed:{
      current_Cate_id() {
          return this.checkedArr[this.checkedArr.length-1]
      }
  }
};
</script>


<style>
  
 .el-radio {
    position: absolute;
    width: 100%;
    height: 24px;
    margin-left: -20px;
}

.el-radio__inner {
    display: none;
}  
</style>

<style lang="scss" scoped>

.el-icon-success {
  color: green;
}

.el-icon-error {
  color: rgb(182, 3, 3);
}

.el-input,.el-cascader {
    width:80%;
}

</style>
